<template>
  <header>
    <div class="title">
        新增页面
    </div>
    <div class="bot">
    <input type="text" placeholder="输入任务名称" v-model="inpuText">
    <button @click="add">新增</button>
    </div>
  </header>
</template>

<script setup>
import {useCounterStore} from '../stores/counter'
import {ref} from 'vue'
import {useRouter} from 'vue-router'
var $router=useRouter()
var inpuText =ref('')
//调用useCounterStore方法，获取store对象
var store=useCounterStore()

//新增任务
var add=()=>{
    //调用仓库中的同步方法新增任务
    store.addtank(inpuText.value)
    inpuText.value=''
    $router.push('/index')

}



</script>

<style scoped>
header{
    height: 150px;
    width: 100%;
    /* background-color: darkcyan; */
    padding: 0px 10px;
    box-sizing: border-box;
}
header .title{
    height: 30px;
    width: 100%;
    text-align: center;
    line-height: 30px;
    color: lightblue;
}
.bot{
    width: 100%;
    height: 80px;
    /* background-color: cadetblue; */
    text-align: center;
    margin-top: 20px;
}
.bot input{
    width: 100%;
    height: 30px;
    border-radius: 7px;
    outline: none;
    border: none;
    padding-left: 10px;
    box-sizing: border-box;
    background-color: rgb(243, 238, 229);

}
.bot button{
    height: 30px;
    width: 100%;
    margin-top: 20px;
    border: none;
    color: rgb(111, 105, 105);
}
</style>